<template>
  <div class="content-box">

		<div class="ceshibox">
			 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="材料" name="first">
					<vxe-table resizable show-overflow ref="xTrees" keep-source 
						@cell-click="cellClickEvent" @edit-closed="kkk"
						:tree-config="{ children: 'children',showIcon:true,expandAll:true, transform: true }" highlight-current-row
						:edit-config="{ trigger: 'click', mode: 'cell',  activeMethod: activeCellMethod }"
						:data="tableData">
						<vxe-table-column type="seq" width="60"></vxe-table-column>
						<vxe-table-column field="name" title="类目" tree-node width="200">
						</vxe-table-column>
						<vxe-table-colgroup v-for="(item, index) in placeList" :title="item.name" :key="index" >
							
						<vxe-table-column title="金额" :field="'maindata[' + index + '].money'"
								:edit-render="{ name: 'input' }">
						</vxe-table-column>
						<vxe-table-column title="数量" :field="'maindata[' + index + '].num'"
								:edit-render="{ name: 'input' }"
								>
						 </vxe-table-column>
								
						</vxe-table-colgroup>
						<vxe-table-column field="unit" title="单位" width="200"></vxe-table-column>
						<vxe-table-column field="remarks.remark" title="备注" width="200" :edit-render="{ name: 'input'}"></vxe-table-column>
					</vxe-table>
				</el-tab-pane>
				<el-tab-pane label="非材料" name="second">
					<vxe-table resizable show-overflow ref="xTree" keep-source 
						@cell-click="cellClickEvent" @edit-closed="kkk"
						:tree-config="{ children: 'children',showIcon:true,expandAll:true, transform: true }" highlight-current-row
						:edit-config="{ trigger: 'click', mode: 'cell',  activeMethod: activeCellMethod }"
						:data="tableData1" class="bbiao">
						<vxe-table-column type="seq" width="60"></vxe-table-column>
						<vxe-table-column field="name" title="类目" tree-node width="200">
						</vxe-table-column>
						
						<vxe-table-column v-for="(item,index) in placeList" :title="item.name" class="bbiao"
							:field="'maindata['+index+'].money'" :edit-render="{ name: 'input'}" :key="item.id">
						</vxe-table-column> 
						<vxe-table-column field="remarks.remark" title="备注" width="200" :edit-render="{ name: 'input'}"></vxe-table-column>
					</vxe-table>
				</el-tab-pane>
				
			</el-tabs>
		</div>
	</div>
</template>

<script>
import { getRoutes } from '../api/user'
import {UpdateArticalData, UpdateRemarkData} from "@/api/article"
// import { format } from 'echarts/lib/export';
// import { VxeGridProps, VxeGridInstance, VxeGridEvents } from 'vxe-table'

export default {
  data() {
    return {
    
      	tableData: [],

		tableData1: [],

      	ids: "",

      	idd : "",

	  	placeList: [],

		upData: [],

		rowData: [],

		rows: {},

		activeName: "first",

		start_day: "",

		end_day: "",
    };
  },
  created() {
	this.formatDate()
    this.ids = this.$route.query.id
    this.idd = localStorage.getItem("id")
    this.getDeparts()
	
  },
  methods: {

    // 获取所有权限信息
    async getDeparts() {
		let aa = []
		let bb = []
      const res = await getRoutes({pro_id: this.ids, id: this.idd,start_day: this.start_day,end_day: this.end_day})
      if (res.code === 200) {
			res.moduleslist.forEach((item) => {
                if(item.is_materials == true){ 
                    aa.push(item)
                }else{
					bb.push(item)
				}
            })
			this.tableData = aa
			this.tableData1 = bb
		
			this.placeList = res.placelist
			
			this.$nextTick(() => this.$refs.xTree.setAllTreeExpand(true))
			this.$nextTick(() => this.$refs.xTrees.setAllTreeExpand(true))
      }
    },

	//单元格失去焦点时修改
	async kkk(row, rowIndex) {
		
		const arr = this.rowData
		let list = row.row.maindata
		var objNum = {}
		
		var isExist = false;
		for (var i = 0; i < list.length; i++) {
			var obj = list[i];
			var money = obj.money;
			var num = obj.num

			for (var j = 0; j < this.upData.length; j++) {
				if (this.upData[i].money != money || this.upData[i].num != num) {
					const res = await UpdateArticalData(obj)
					if (res.code === 200) {
						isExist = true
						this.getDeparts()
					}
				}
			}
		}
		const re = await UpdateRemarkData(this.rows)
		// console.log(res, "dsdadadadadadada")
		if (re.code === 200) {
			isExist = true
			this.getDeparts()
		}
		if (isExist) {
			return this.$message.success('修改成功')
		}

	},

	formatDate(){
		let date = new Date()
		let myyear = date.getFullYear()
		let mymonth = date.getMonth() + 1 
		let myweekday = date.getDate()
		mymonth < 10 ? mymonth = "0" + mymonth : mymonth
		myweekday < 10 ? myweekday = "0" + myweekday : myweekday
		this.start_day = `${myyear}-${mymonth}-${myweekday}`
		this.end_day = `${myyear}-${mymonth}-${myweekday}`
		return `${myyear}-${mymonth}-${myweekday}`
	},

	

	//点击单元格触发@cell-click="cellDown"
	cellClickEvent(row) {
		this.rowData = row.row.maindata
		this.upData = row.row.maindata
		this.rows = row.row.remarks
		// console.log(this.rowData, "row")
		// console.log(this.upData, "up")
		// console.log(row.row, 'row')
	},

	//禁止编辑
	activeCellMethod({ row, rowIndex }) {
		this.upData = []
		row.maindata.forEach((res) => {
			this.upData.push({ ...res })
		})
		if (row.children !== undefined) {
			this.$XModal.message({
				message: '禁止编辑',
				status: 'error'
			})
			return false
		}

		return true
	},

	handleClick(e){
		this.getDeparts()
	}
}
}
</script>

<style lang="scss" scoped>
.content-box {
		width: 100%;

		.content-table {
			width: 96%;
			margin: 0 auto;
			margin-bottom: 1.25rem;
		}

		.head-row {
			margin-top: 1.25rem;
			margin-left: 1.75rem;
			margin-bottom: 1.25rem;

			.el-col {
				margin-left: 1.75rem;
			}
		}

		.vxebtn {
			margin-left: 0.625rem;
			text-align: center;
		}

		.ceshibox {
			margin-top: 2rem;
			width: 90%;
			margin-left: 2.25rem;
			margin-right: 2.25rem;
			.btn{
				margin-bottom:10px;
			}
		}
	}
	.bbiao{
		width: 100%;
	}
</style>